<template>
  <view class="info-wrapper">

    <view class="search" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
      <navagationBar>
        <template>
          <view class="navbar">
            <view class="navbar-icon" @click="handleBack">
              <uni-icons type="back" size="20"></uni-icons>
            </view>
            <view class="navbar-info" v-if="cityInfo.isNationwide === 0">
              <text v-if="cityInfo.citysCount === 1">仅限{{cityInfo.citys}}</text>
              <text v-else @click="showCityInfo=true">部分城市({{cityInfo.citysCount}})</text>
            </view>
          </view>
        </template>
      </navagationBar>
    </view>

    <view class="content-wrapper">

      <view class="step-wrapper" v-if="showStep">
        <view class="step">
          <view class="step-item">
            <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/choose_brand.png"></image>
            <text :class="{'step-active':currentStep===0}">选择品牌</text>
          </view>
        </view>
        <view class="step-gap">
          <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/select_car_row.png"></image>
        </view>
        <view class="step">
          <view class="step-item">
            <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/choose_type.png"></image>
            <text :class="{'step-active':currentStep===1}">选择车型</text>
          </view>
        </view>
        <view class="step-gap">
          <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/select_car_row.png"></image>
        </view>
        <view class="step">
          <view class="step-item">
            <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/choose_engine.png"></image>
            <text :class="{'step-active':currentStep===2}">选择发动机</text>
          </view>
        </view>
        <view class="step-gap">
          <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/select_car_row.png"></image>
        </view>
        <view class="step">
          <view class="step-item">
            <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/choose_mileage.png"></image>
            <text :class="{'step-active':currentStep===3}">选择里程</text>
          </view>
        </view>
      </view>

      <view class="reslut-wrapper" v-if="showResult">
        <view class="icon">
          <image v-if="resultData.pic":src="resultData.pic"></image>
          <image v-else src="@/static/goods_default_4.png"></image>
        </view>
        <view class="car" @click="switchTopWrapper">{{resultData.maintenanceCarModel}}</view>
        <view class="mileage" @click="switchToMlieage">
          <view class="top">
            <image
              src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/mileage_common.png">
            </image><text class="text">里程</text>
          </view>
          <view class="bottom">
            {{resultData.mileageStr}}
          </view>
        </view>
      </view>

      <view class="display-wrapper" v-if="showCarInfo">
        <view class="car-model-title">{{carModelTitle[currentStep]}}</view>
        <u-list>
          <view v-if="currentStep === 0">
            <u-list-item v-for="(item, index) in carBrandData" :key="index" class="list-item">
              <view class="item-wrapper" :class="{active:num===index}" @click="handleItemClick(item,index)">
                <image class="icon" v-if="item.pic" :src="item.pic"></image>
                <image class="icon" v-else src="@/static/goods_default_4.png"></image>
                <text class="text">{{item.carBrand}}</text>
                <image class="choose" v-show="num===index" :src="chooseUrl"></image>
              </view>
            </u-list-item>
          </view>
          <view v-if="currentStep === 1">
            <u-list-item v-for="(item, index) in carTypeData" :key="index" class="list-item">
              <view class="item-wrapper" :class="{active:num===index}" @click="handleItemClick(item,index)">
                <image class="icon" v-if="item.pic" :src="item.pic"></image>
                <image class="icon" v-else
                  src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/default_car.png">
                </image>
                <text class="text">{{item.carBrand}}-{{item.carModel}}</text>
                <image class="choose" v-show="num===index" :src="chooseUrl"></image>
              </view>
            </u-list-item>
          </view>
          <view v-if="currentStep === 2">
            <u-list-item v-for="(item, index) in carEngineData" :key="index" class="list-item">
              <view class="item-wrapper item-other-wrapper" :class="{active:num===index}"
                @click="handleItemClick(item,index)">
                <text class="text">{{item.engineModel}}</text>
                <image class="choose" v-if="num===index" :src="chooseUrl"></image>
              </view>
            </u-list-item>
          </view>
          <view v-if="currentStep === 3">
            <u-list-item v-for="(item, index) in carMileageData" :key="index" class="list-item">
              <view class="item-mileage-wrapper" :class="{active:num===index}" @click="handleItemClick(item,index)">
                <text class="text">{{item.name}}</text>
                <image class="choose" v-show="num===index" :src="chooseUrl"></image>
              </view>
            </u-list-item>
          </view>
        </u-list>
      </view>

      <view class="goods-wrapper" v-if="showGoodsInfo && goodsData.length > 0">
        <view v-for="(item, index) in goodsData" :key="item.goodsId">
          <view class="product-item" @click="goGoodsDetail(item.jfcode)">
            <view class="goods-image-wrapper">
              <image v-if="item.imgURL" :src="item.imgURL">
              </image>
              <image v-else src="@/static/goods_default.png"></image>
              <image class="bage" :src="handleBageDisplay(item.promotionLabel)"></image>
              <view class="tcll-g-markrt" v-if="item.buyPromotion && item.buyPromotion.buyPromotionList && item.buyPromotion.buyPromotionList.length">
              	<view class="tcll-gm-left">
              		满 <text class="tcll-gml-count">{{ item.buyPromotion.buyNum }}</text> 条
              	</view>
              	<view class="tcll-gm-right">
              		<!-- BUY_GIFT-购物有礼，RAFFLE-购胎抽奖 -->
              		<template v-if="item.buyPromotion.buyPromotionList.length === 1">
              			<text v-if="item.buyPromotion.buyPromotionList[0].code === 'BUY_GIFT'">享赠品</text>
              			<text v-else-if="item.buyPromotion.buyPromotionList[0].code === 'RAFFLE'">享抽奖</text>
              		</template>
              		<text v-else>享赠品和抽奖</text>
              	</view>
              </view>
            </view>
            <view class="goods-info">
              <view class="product-info-title">
                <text>{{ item.name }}</text>
              </view>
              <view class="product-info-tagList" v-if="item.tagList && item.tagList.length">
                <view class="product-info-tagList-item" v-for="tag in item.tagList" :key="tag.id">
                  {{ tag.name }}
                </view>
              </view>
              <view class="product-info-price">
                <view class="price-wrapper" v-if="!item.useCouponPrice">
                  <text class="new"><text class="money">¥</text>{{ item.discountShowPrice }}</text>
                </view>
                <view class="price-wrapper" v-else>
                  <text class="new-title">券后价</text>
                  <text class="new"><text class="money">¥</text>{{ item.useCouponPrice }}</text>
                </view>
                <text class="old">¥{{ item.sellPrice }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view v-if="!goodsData.length && showGoodsInfo" class="empty">
        <image src="@/static/empty.png"></image>
        <text>无数据</text>
      </view>
      
      <!-- <uni-load-more :status="status" :content-text="loadMoreText" v-if="loadVisible" /> -->

    </view>

    <u-popup :show="showCityInfo" mode="center" :round="10" closeable :safeAreaInsetBottom="false" width="750"
      @close="showCityInfo=false">
      <view class="pop-content">
        <view class="title">
          支持城市清单({{cityInfo.citysCount}})
        </view>
        <view class="middle">
          {{cityInfo.citys}}
        </view>
        <view class="bottom">
          <u-button type="primary" text="我知道了" :custom-style="{ margin: '50rpx 0 0' }"
            @click="showCityInfo=false"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapState,
    mapMutations
  } from 'vuex'
  import navagationBar from '@/components/navigationBar.vue'

  export default {
    components: {
      navagationBar
    },
    data() {
      return {
        showCityInfo: false,
        cityInfo: {},
        currentStep: 0,
        carModelTitle: {
          0: '选择车辆品牌',
          1: '选择车型',
          2: '选择发动机型号',
          3: '选择里程',
        },
        chooseUrl: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/choose_common.png',
        carBrandData: [],
        carTypeData: [],
        carEngineData: [],
        carMileageData: [],
        num: null,
        maintenanceCarModelId: 0,
        mileage: 0,
        showResult: false,
        showStep: true,
        resultData: {},
        page: 1,
        size: -1,
        total: 0,
        status: 'more',
        loadVisible: false,
        loadMoreText: {
        	contentdown: "上拉显示更多",
        	contentrefresh: "正在加载...",
        	contentnomore: "没有更多数据了",
        },
        goodsData: [],
        showCarInfo: true,
        showGoodsInfo: false,
        choiceFlag: false,
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
      ...mapGetters('user', ['getUserInfo']),
      ...mapGetters('cart', ['getCarChoice']),
    },
    methods: {
      handleBageDisplay(data) {
        if(!data.length) {
          return false
        }
        const hasA = data.some((item) => item.code === "DISCOUNT")
        const hasB = data.some((item) => item.code === "POINT")
        
        if (hasA && hasB) {
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/goods_discount_point.png" 
        } else if (hasA) {
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/goods_discount.png" 
        } else if (hasB) {
          return "https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/goods_point.png"; 
        } else {
          return ""
        }
      },
      reset() {
      	this.loadVisible = true
      	this.status = 'more'
      	this.page = 1
      	this.getGoodsData()
      },
      
      handleBack() {
        if (this.currentStep === 0) {
          if(this.choiceFlag) {
            this.showResult = true;
            this.showStep = false;
            this.getGoodsData()
            this.choiceFlag = false
          } else {
            uni.navigateBack()
          }
        } else {
          if(this.currentStep === 4) {
            uni.navigateBack()
          }
          this.currentStep -= 1
        } 
      },
      
      async getCitys() {
        const res = await this.$request({
          method: 'GET',
          url: '/user-center/banner/appGetCitys',
        })
        this.cityInfo = res.datas
      },

      async getCarModelData() {
        const res = await this.$request({
          method: 'POST',
          url: '/terminal-serve-center/maintenance/app/carModelData',
          data: {}
        })
        this.carBrandData = res.datas
      },

      async getCarMileageData() {
        const res = await this.$request({
          method: 'POST',
          url: '/terminal-serve-center/maintenance/app/mileageData',
          data: {}
        })
        this.carMileageData = res.datas
      },

      async saveChoiceData() {
        const res = await this.$request({
          method: 'POST',
          url: '/terminal-serve-center/maintenance/app/saveChoiceData',
          data: {
            maintenanceCarModelId: this.maintenanceCarModelId,
            mileage: this.mileage,
            userId: this.getUserInfo.id
          }
        })
        if (res.datas) {
          this.showResult = true;
          this.showStep = false;
          this.resultData = res.datas
          this.$store.commit('cart/setCarChoice', res.datas)
          this.getGoodsData()
          this.choiceFlag = true
        }
      },

      async getGoodsData() {
        const res = await this.$request({
          method: 'GET',
          url: '/product-center/merchantPurchase/new/pageGoodsByDriver',
          data: {
            pageNum: this.page,
            pageSize: this.size,
            userId: this.getUserInfo.id || '',
            maintenanceCarModelId: this.resultData.maintenanceCarModelId,
            maintenanceFilter: true,
            mileage: this.resultData.mileage
          }
        })
        this.goodsData = res.datas.data
        this.total = res.datas.count
        this.showGoodsInfo = true
        this.showCarInfo = false
      },
      
      async getUserChoiceData() {
        const res = await this.$request({
          method: 'GET',
          url: '/terminal-serve-center/maintenance/app/userChoiceData',
          data: {
            userId: this.getUserInfo.id || '',
          }
        })
        // 若之前已经选择了数据
        if(res.datas) {
          this.maintenanceCarModelId = res.datas.maintenanceCarModelId
          this.resultData = {... res.datas}
          this.showResult = true;
          this.showStep = false;
          this.getGoodsData()
        }
      },

      handleItemClick(item, index) {
        this.num = null;
        if (this.currentStep === 2) {
          this.maintenanceCarModelId = item.maintenanceCarModelId
          this.getCarMileageData()
        } else if (this.currentStep === 3) {
          this.mileage = item.value
          this.saveChoiceData()
        }
        this.num = index;
        this.currentStep += 1
        this.carTypeData = item.carModelList;
        this.carEngineData = item.engineModelList;
      },

      switchTopWrapper() {
        this.num = null
        this.currentStep = 0
        this.showResult = false
        this.showStep = true
        this.showGoodsInfo = false
        this.showCarInfo = true
        this.choiceFlag = true
      },
      
      switchToMlieage() {
        this.getCarMileageData()
        this.currentStep = 3
        this.showResult = false
        this.showStep = true
        this.showGoodsInfo = false
        this.showCarInfo = true
      },
      
      //进入商品详情页面
      goGoodsDetail(code) {
      	if (this.getUserInfo.id) {
      		uni.navigateTo({
      			url: `/components/goodsDetail?jfcode=${code}`
      		});
      	} else {
      		uni.redirectTo({
      			url: '/authPack/login/wxLogin'
      		})
      	}
      },
    },

    onLoad() {
      this.getUserChoiceData() 
      this.getCarModelData()
      this.getCitys()
    },
  }
</script>

<style lang="scss" scoped>
  .active {
    background: #FFF6F6;
    border-radius: 8rpx;
  }

  .step-active {
    color: #CF1A1B;
  }

  .sticky {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 99;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 20rpx;
  }

  .info-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .navbar {
      height: 100%;
      display: flex;
      align-items: center;
      background-color: #FFFFFF;

      &-icon {
        font-size: 14px;
        margin: 20rpx;
      }
    }

    .step-wrapper {
      height: 220rpx;
      margin-bottom: 16rpx;
      background-color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
      font-size: 28rpx;

      .step {
        .step-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 10rpx;
          }
        }
      }
      .step-gap {
        width: 44rpx;
        height: 20rpx;
        position: relative;
        bottom: 26rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .reslut-wrapper {
      height: 116rpx;
      width: calc(100% - 10rpx);
      background: linear-gradient(180deg, #FFEFF0 0%, #FFFFFF 100%);
      border-radius: 14rpx 0rpx 0rpx 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 22rpx;

      .icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 6rpx;
        background: #fff;
        margin: 0 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .car {
        flex: 1;
        margin-left: 10rpx;
      }

      .mileage {
        width: 184rpx;
        display: flex;
        flex-direction: column;
        height: 100%;
        border-left: 4rpx solid #FFFFFF;

        .top {
          height: 50%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            width: 14px;
            height: 13px;
          }

          .text {
            margin-left: 10rpx;
          }
        }

        .bottom {
          height: 50%;
          text-align: center;
        }
      }
    }

    .display-wrapper {
      background-color: #FFFFFF;
      width: 100%;
      overflow: auto;

      .car-model-title {
        height: 48rpx;
        line-height: 48rpx;
        margin-top: 64rpx;
        margin-bottom: 60rpx;
        margin-left: 40rpx;
        font-size: 38rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #262626;
      }

      .list-item {
        margin: 20rpx 0;
      }

      .item-wrapper {
        display: flex;
        align-items: center;
        width: calc(100% - 40rpx);
        margin: 0 auto;
        height: 150rpx;

        .icon {
          width: 100rpx;
          height: 100rpx;
          margin: 20rpx 40rpx;
        }

        .text {
          margin-left: 20rpx;
          flex: 1;
        }

        .choose {
          width: 32rpx;
          height: 28rpx;
          margin-right: 30rpx;
        }
      }

      .item-other-wrapper {
        height: 100rpx;
      }

      .item-mileage-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 40rpx);
        margin: 10rpx auto;
        height: 120rpx;
        background-color: #f5f5f5;

        .text {
          flex: 1;
          margin-left: 40%;
        }

        .choose {
          width: 32rpx;
          height: 28rpx;
          margin-right: 30rpx;
        }
      }
    }


    .pop-content {
      padding: 40rpx;
      width: 590rpx;

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #323233;
      }

      .middle {
        margin: 20rpx 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        word-break: keep-all;
      }
    }
  }


  .goods-wrapper {
    height: auto;
    margin-top: 16rpx;
    background-color: #FFFFFF;

    .product-item {
      box-sizing: border-box;
      overflow: hidden;
      break-inside: avoid;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      // border-radius: 10rpx;
      // box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(#000000, .16);
      position: relative;
      display: flex;
      align-items: center;

      .goods-image-wrapper {
        margin: 0 20rpx;
        position: relative;

        image {
          width: 180rpx;
          height: 180rpx;
        }

        .bage {
          position: absolute;
          width: 48rpx;
          height: 48rpx;
          right: 0;
          top: 0;

          image {
            width: 100%;
            height: 100%;
          }
        }
        
        .tcll-g-markrt {
        	position: absolute;
        	left: 0;
        	bottom: 0;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	font-size: 9px;
        	color: #ffffff;
        	background-color: #FB003D;
        	height: 34rpx;
        	width: 100%;
        	font-weight: bold;
        	letter-spacing: 1px;
        	.tcll-gm-right {
        		background: linear-gradient(153deg, #FEFAE7 0%, #FFD938 100%);
        		-webkit-background-clip: text; 
        		-webkit-text-fill-color: transparent; 
        	}
        }
      }

      .goods-info {
        flex: 1;

        .product-info-title {
          margin: 20rpx 0;
          line-height: 36rpx;
          display: -webkit-box;
          overflow: hidden;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .product-info-tagList {
          display: flex;
          flex-wrap: wrap;
          max-height: 68rpx;
          overflow: hidden;

          .product-info-tagList-item {
            margin: 0 16rpx 8rpx 0;
            padding: 0 4rpx;
            font-size: 22rpx;
            color: #996C00;
            background-color: #FFF8E6;
          }
        }

        .product-info-price {
          margin: 20rpx 0;

          .price-wrapper {
            display: inline;
          }

          .new-title {
            font-size: 13px;
            color: #EE3B3B;
            margin-right: 8rpx;
          }

          .new {
            font-size: 16px;
            font-weight: bold;
            color: #EE3B3B;
            margin-right: 10rpx;

            .money {
              font-size: 10px;
            }
          }

          .old {
            font-size: 10px;
            color: rgba(#000000, .45);
            line-height: 28rpx;
            text-decoration: line-through;
          }
        }

      }

    }
  }
  
  	// 无内容
  	.empty {
  		width: 100%;
  		height: 100%;
      margin-top: 16rpx;
  		padding-bottom: 40rpx;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  		background-color: #FFFFFF;
  		image {
  			width: 220px;
  			height: 180px;
  		 }
  		text {
  			font-size: 30rpx;
  			color: rgba(0,0,0,0.45);
  			line-height: 30rpx;
  		}
  	}
  
</style>